---
title: "08-用 AI + Remotion 生成教学动画视频"
created: 2026-05-25
tags:
  - 博客
aliases:
  - 用 AI + Remotion 生成教学动画视频
---

# 用 AI + Remotion 生成教学动画视频

## **一、缘起**

最近思维有些空洞，很久没冒出新点子，于是又给自己做了一次小型头脑风暴，想找点有意思的事情做。

最近的几条线索同时撞在了一起：

一是我在学技术时，发现市面上很多教程动画做得相当不错，比如“小白 debug”那种风格，画面、节奏、讲解都很顺。我开始好奇：他们到底是怎么做出来的？

二是我准备帮女朋友复习期末，但人不在身边，仅靠语音和文字很难把一些概念讲得生动，特别是需要画图、需要演示过程的内容。我开始想：有没有一种形式，能更直观、更有画面、更便于反复看？

三是前段时间在抖音上刷到“用 HTML 生成动画”的内容，当时没仔细看，但留下了印象。

这三条线索叠加在一起，我开始顺着想：能不能让 AI 直接生成讲解动画？

---

## **二、第一步验证：让 AI 生成一道错题的讲解动画**

我先做了最便宜的验证：让 AI 用 HTML / CSS / JavaScript 写出一段讲解动画，然后浏览器打开看效果。

结果出乎意料地不错。动画节奏、信息层级、文字出现方式，配合一点动效，看起来已经接近一个简单的科普视频片段。

![[7-Blog/AI技术/拓展/assets/PixPin_2026-05-25_14-06-57-1f38dd21.gif]]

这一步让我相信：

> 这条路至少“可视化讲解”这一块是成立的。

于是做了一个简单的gem，用于专门生成这类内容，将上传的题目变成动画讲解的html:

```
你是一位资深的'HTML教学动画生成专家'，致力于将抽象概念、课程脚本和教学主题转化为可直接运行的高质量HTML动画页面，用于教学视频录制。

核心目标：

生成逻辑清晰、视觉直观且动效顺滑的代码。你不仅是开发者，更是教学编导、可视化设计师和动效设计师。

工作原则：

1. 教学优先：动画必须服务于知识理解，而非单纯炫技。

2. 逻辑转化：将用户想法转化为清晰的教学逻辑、易懂的视觉隐喻和顺滑的动画节奏。

3. 补全能力：当用户描述模糊时，主动补全合理细节并直接给出可运行版本。

输出规范：

1. 默认交付标准：生成一个完整的单文件HTML，包含HTML、CSS和JavaScript，不依赖任何外部资源（CDN、外部图片或字体）。

2. 画面标准：默认16:9横屏布局（1920×1080布局思路），现代简洁风格，所有文字使用中文。

3. 内容结构：

   - 动画设计说明：说明教学目标、视觉隐喻及分镜思路。

   - 分镜时间线：列表展示各时间段的画面内容、动作及旁白建议。

   - 完整代码：提供包含'!DOCTYPE html'、'style'、'script'标签的完整闭合代码块。

   - 修改建议：简述如何微调文案、颜色和动画速度。

技术与动效要求：

- 自动播放：页面加载后动画必须自动开始。

- 节奏控制：开头提出问题，每个知识点停留5-10秒，关键点停留1-2秒，结尾总结停留3-5秒。

- 视觉风格：默认采用深色背景、高对比文字和重点色突出，支持'科技感'、'黑板风'等多种可选风格。

- 代码稳定性：布局稳定，不产生溢出，关键参数集中以便用户修改。
```

## **三、为什么这件事可能有市场价值**

只是好玩还不够，我接着往现实意义上想。

第一，市场上确实有大量这种内容生产需求。我在招聘软件上能看到，作业帮、搜题软件等公司一直在大量招人录制题目讲解视频。这说明这类内容是有真实价值的，但目前主要靠人工产出。

第二，这种内容对“偏想象”“偏画图”的科目特别有用，比如：

- 物理的受力、运动、电路
- 几何的辅助线、空间结构
- 地理的洋流、地形、气候
- 函数图像、坐标轴变化
- 化学反应过程

文字解析很难讲清楚的内容，动画能直接“演”出来。

第三，如果能把这种生产流程批量化、自动化，就能在两方面体现价值：

> 一方面让讲解更生动，更可视化；
> 另一方面节省大量人力成本。

这就不只是“做着玩”，而是有现实落点的方向，且对于学生来说是具有真实意义的。

## **四、第一版方案的问题：HTML 路线的局限**

第一版方案是“让 AI 生成完整 HTML 动画”，但越往下想，问题越明显。

#### **1. 对用户不友好**

HTML 对程序员还算友好，但对普通用户来说：

- 每次都要复制代码
- 还要改文件名后缀
- 用浏览器打开
- 想保存还得自己录屏

这条链路用户几乎走不下去。

#### **2. 不可分享**

视频是天然适合传播的格式，HTML 不是。要分享给老师、学生、家长，最自然的形式还是“一个能直接播放、能下载、能转发的视频文件”。

#### **3. 每次都生成完整 HTML，是一种浪费**

每次让 AI 写一整份 HTML 至少带来两个问题：

- 样式每次都不一样，风格不稳定
- token 消耗大，成本不低

更合理的做法应该是：

> 把模板沉淀下来，AI 只负责“内容”，不负责“画面”。

## **五、第二版方案：模板化 + JSON 化讲解脚本**

顺着上面的问题继续推演，我得出一套更合理的设计思路。

#### **1. 不同类型的内容对应不同模板**

比如：

- 错题讲解模板
- 概念解释模板
- 公式推导模板
- 图像变化模板
- 流程演示模板
- 对比类模板

模板由开发者预先设计好，保证视觉风格统一、动画质量稳定。

#### **2. 问题内容 JSON 化**

每次 AI 不再写动画代码，而是输出一段结构化的 JSON 讲解脚本。比如：

- 题目
- 关键条件
- 学生错误及错因
- 正确步骤
- 关键提醒
- 方法总结
- 旁白文本

#### **3. AI 的角色变成“教学编导”，而不是“前端工程师”**

AI 负责：

- 理解题目
- 拆解知识点
- 设计讲解逻辑
- 生成分镜和旁白

视频框架负责：

- 渲染稳定的画面
- 控制时间线
- 合成最终视频

这样既稳定，又省 token，还能保证风格统一。

到这里整个方向已经从“好玩的尝试”变成了一个像产品的东西。

## **六、意外的发现：Remotion 已经替我把路铺好了**

带着上面的想法继续查，我发现已经有一个非常成熟的工具：**Remotion**。

它不仅印证了我前面所有的设想，还顺带解决了我接下来打算思考的一个问题：**配音同步**。

### **Remotion 是什么**

Remotion 是一个用 React 编写视频的程序化视频框架。它的核心思想是：

> 视频不是在剪辑软件里拖时间线，而是用代码描述每一帧。

你写 React 组件、CSS、SVG、Canvas，Remotion 按帧渲染这些画面，最后输出真正的视频文件，比如 MP4 或 WebM。

### **它为什么正好契合我的设想**

#### **1. 模板化天然支持**

每一类讲解都可以做成一组组件，画面统一、动画稳定，复用性极强。

#### **2. JSON 数据驱动视频**

视频可以由一份 JSON 数据生成，AI 只需要生成数据，不需要写视觉。

#### **3. 可以本地预览**

它提供 Remotion Studio，可以像浏览网页一样实时预览动画。我担心的“看不到效果不敢动手”的问题，被它解决了。

#### **4. 可以直接导出 MP4**

不需要录屏，命令行一行就能输出视频，体验对用户极其友好。

#### **5. 原生支持音频**

可以在视频里加入旁白、背景音乐、按帧控制音量，意味着 TTS 配音可以非常自然地接进来。

#### **6. 适合接入 AI**

社区已经有 “Prompt to Motion Graphics” 这类 SaaS Starter Kit，说明 AI + Remotion 已经是被验证的工作流。

### **我自己验证的结果**

我已经在本地跑通了一个 Demo：

- 写了一份 JSON 描述错题讲解
- 设计了 5 个场景：标题、题目、错误、正确步骤、总结
- Remotion 把它渲染成了一条大约 48 秒的视频
- 改 JSON 就能换成另一道题
- 一键导出 MP4

[[7-Blog/AI技术/拓展/08-用 AI + Remotion 生成教学动画视频|用 AI + Remotion 生成教学动画视频]]

也就是说：

> 整条链路在我的电脑上已经走通了。

## **七、对未来的判断：为什么不会被通用 AI 视频模型降维打击**

因为之前也有做过ai漫剧，对视频模型也有一定了解，有着一个担心的点：Veo、Seedance、Hailuo 这类视频模型越来越强，再投喂教学视频会不会形成降维打击？

最后得到的判断是：

> 在视觉表现力上，视频模型会越来越强；
> 但在“教学准确性、可控性、可编辑性、批量稳定性”上，程序化视频路线仍然有明显优势。

它们的本质区别是：

| 维度 | 程序化视频（Remotion） | 通用视频模型 |
| --- | --- | --- |
| 核心强项 | 精确、可控、可编辑、可批量 | 镜头感、画面氛围、真实感 |
| 适合内容 | 错题、公式、图表、流程、课程 | 广告、短片、故事、实拍感 |
| 教学准确性 | 强，可校验 | 需要大量审核 |
| 修改成本 | 极低，改 JSON 即可 | 高，往往需要重新生成 |
| 批量生成 | 边际成本低，稳定 | 成本和筛选压力较大 |

教育内容不能只追求“像”，必须“对”。这就让程序化视频在教学场景里反而更有竞争力。

更现实的做法是：

> 用程序化视频负责核心讲解，用视频模型生成局部增强素材（开场氛围、过渡镜头、生活化比喻画面）。

形成混合方案，而不是二选一。

## **八、系统构思：可以这样做这个项目**

把前面所有的思考整理之后，整个项目的轮廓已经比较清晰。

### **一句话定位**

> 用 AI 生成结构化教学内容，用 Remotion 把它稳定地视频化，让每一道错题、每一个知识点，都能变成一段可观看、可保存、可分享的讲解视频。

不是“AI 视频生成器”，而是：

> **学习内容的视频化引擎。**

### **系统分三层**

#### **第一层：内容理解层（AI 负责）**

输入题目、知识点、错题图、学生答案，输出：

- 题目结构化解析
- 知识点标签
- 错误类型识别
- 正确解题步骤
- 关键提醒
- 同类题方法
- 旁白稿
- 分镜 JSON

#### **第二层：视频表达层（Remotion 负责）**

读取结构化 JSON，使用对应模板，渲染：

- 动画画面
- 公式推导
- 高亮和标注
- 字幕
- 旁白音频
- 背景音乐（可选）
- 最终 MP4

#### **第三层：学习管理层（产品层）**

视频不是孤立存在的，可以接入：

- 错题本
- 学生个性化复习
- 知识点掌握度
- 老师备课素材
- 班级共享内容
- 自动复习推送

三层组合起来，才不是“一个视频工具”，而是“一个学习系统”。

### **生产流水线**

```
用户输入题目 / 知识点 / 错题图
        ↓
AI 理解内容 → 生成结构化 JSON
        ↓
AI 生成旁白文本
        ↓
TTS 批量生成每一幕音频
        ↓
按音频长度回填每一幕时长
        ↓
Remotion 渲染画面 + 音频 + 字幕
        ↓
输出 MP4
        ↓
保存到学生错题本，可下载、可分享
```

## **九、护城河和长期价值**

如果继续往下做，这件事的护城河不会只是“做了几套漂亮模板”，而会沉淀在更深的地方。

第一，**题型模板库**。每一类题对应最适合的视觉表达方式。

第二，**错因分析库**。讲对答案不难，难的是讲“为什么会错”。能识别常见错误类型，并自动生成针对性讲解。

第三，**分镜生成质量**。AI 不只是写旁白，而是真正能设计教学节奏：什么时候展示、什么时候高亮、什么时候停顿、什么时候总结。

第四，**可编辑工作流**。老师和家长可以快速修改题目、步骤、旁白、时长，再一键导出视频。

第五，**批量个性化能力**。一个学生的整本错题本，可以一次性生成一组个性化讲解视频。这是人工录制几乎做不到的。

---